<ul class="left_tabs tabs" id="layout_content_tabs" target="main_tabs_content">
	<li><a href="javascript:void(0)" content="main_layout">添加布局</a></li>
	<li><a href="javascript:void(0)" content="main_adv">基本设置</a></li>
	<li class="selected"><a href="javascript:void(0)" content="main_style">高级设置</a></li>
	<li><a href="javascript:void(0)" content="class_demo">经典布局</a></li>
</ul>
<div class="tabs_right_content tabs_content" id="main_tabs_content">
	<div id="main_layout" class="tabs_content_body">
		<div class="layout_add_div">
			<h3>点击下面图标，添加新布局：</h3>
			<ul class="layout_opts">
				<li>
					<a href="javascript:void(0)" title="一栏" widget="layout_1" class="layout_opt layout_opt_1"></a>
				</li>
				<li>
					<a href="javascript:void(0)" title="二栏" widget="layout_2" class="layout_opt layout_opt_2"></a>
				</li>
				<li>
					<a href="javascript:void(0)" title="三栏" widget="layout_3" class="layout_opt layout_opt_3"></a>
				</li>
				<li>
					<a href="javascript:void(0)" title="四栏" widget="layout_4" class="layout_opt layout_opt_4"></a><br>
				</li>
			</ul>
			<p>双击上面布局图标，添加到当前选中区域</p>
		</div>
		<div class="v_line"></div>
		<div class="float_left">
			当前所有布局：
		</div>
	</div>
	<div id="main_adv" class="tabs_content_body">
	</div>
	<div id="main_style" class="tabs_content_body selected" id="widget_setter" widget="body">
		<div class="layout_add_div">
			<div class="radio_content">
				<input type="radio" id="body_align_left" name="body_align" value="left"/><label for="body_align_left">居左对齐</label>
				<input type="radio" id="body_align_center" name="body_align" checked="checked" value="center"/><label for="body_align_center">居中对齐</label>
				<input type="radio" id="body_align_right" name="body_align" value="right"/><label for="body_align_right">居右对齐</label>
			</div>
			<h3>字体：大小<input type="text" class="width_v" id="setter_font_size" config="{type:'num',cent:false,px:true,px_opts:[10,12,14,16],px_rank:[0,100],target:'body',css_name:'font-size'}" /> 
				颜色<input type="text" class="color font_color" config="{type:'color',target:'body',css_name:'color'}" /></h3>
			<h3>
				行高：<input type="text" class="width_v" config="{type:'num',cent:false,px:true,px_rank:[0,100],px_opts:[15,20,24,32],target:'body',css_name:'line-height'}" />
				左缩进：<input type="text" class="width_v" config="{type:'num',body:true,cent:false,px:true,px_rank:[0,100],px_opts:[15,20,30],target:'body',css_name:'text-indent'}" />
			</h3>
		</div>
		<div class="v_line"></div>
		<div class="float_left">
			<div class="my_tabs3">
				<ul class="tabs" id="layout_style_setter" target="bg_setting">
					<li><a href="javascript:void(0)" content="jingdian">边距|宽高设置</a></li>
					<li><a href="javascript:void(0)" content="biankuang">边框设置</a></li>
					<li class="selected"><a href="javascript:void(0)" content="gaojisz">背景设置</a></li>
				</ul>
				<ul class="tabs_content" id="bg_setting">
					<li class="background_class_li tabs_content_body" id="jingdian">
						<div id="wbj">
							<span>外边距</span>
							<input type="text" class="width_input top_input" config="{type:'num',body:true,cent:false,px:true,px_opts:[1,5,10,20],px_rank:[0,500],target:'body',css_name:'margin-top'}"/>
							<input type="text" class="width_input right_input" config="{type:'num',body:true,cent:false,px:true,px_opts:[1,5,10,20],px_rank:[0,100],target:'body',css_name:'margin-right'}"/>
							<input type="text" class="width_input bottom_input" config="{type:'num',body:true,cent:false,px:true,px_opts:[1,5,10,20],px_rank:[0,100],target:'body',css_name:'margin-bottom'}"/>
							<input type="text" class="width_input left_input" config="{type:'num',body:true,cent:false,px:true,px_opts:[1,5,10,20],px_rank:[0,100],target:'body',css_name:'margin-left'}"/>
							<div id="nbj">
								<span>内边距</span>
								<input type="text" class="width_input top_input" config="{type:'num',cent:false,px:true,px_opts:[1,5,10,20],px_rank:[0,100],target:'body',css_name:'padding-top'}"/>
								<input type="text" class="width_input right_input" config="{type:'num',cent:false,px:true,px_opts:[1,5,10,20],px_rank:[0,100],target:'body',css_name:'padding-right'}"/>
								<input type="text" class="width_input bottom_input" config="{type:'num',cent:false,px:true,px_opts:[1,5,10,20],px_rank:[0,100],target:'body',css_name:'padding-bottom'}"/>
								<input type="text" class="width_input left_input" config="{type:'num',cent:false,px:true,px_opts:[1,5,10,20],px_rank:[0,100],target:'body',css_name:'padding-left'}"/>
								<div id="kg">
									<span class="widget_height">
										高
										<input type="text" id="setter_height" class="width_v"  config="{type:'num',body:true,cent:false,px:true,opt_handle:true,px_opts:[960,980,1000],target:'body',css_name:'height'}" />
									</span>
									<span class="widget_width">
										宽
										<input type="text" class="width_v" id="setter_width" config="{type:'num',body:true,cent:true,px:true,opt_handle:true,cent_opts:[0,30,50,80,100],cent_rank:[0,100],px_opts:[960,980,1000],target:'body',css_name:'width'}" />
									</span>
									
									
								</div>
							</div>
						</div>
					</li>
					<li id="biankuang" class="tabs_content_body">
						<div id="border_template_bg"></div>
						<div id="border_template_top" class="border_template_">
							<span>上</span>
							样式：<input type="text" class="border_style" config="{type:'line',body:true,target:'body',css_name:'border-top-style'}"/><br>
							宽度：<input type="text" class="width_v" config="{type:'num',body:true,cent:false,px:true,px_opts:[1,2,3,5],px_rank:[0,100],target:'body',css_name:'border-top-width'}"/><br>
							颜色：<input type="text" class="color" config="{type:'color',body:true,target:'body',css_name:'border-top-color'}"/>
						</div>
						<div id="border_template_right" class="border_template_">
							<span>右</span>
							样式：<input type="text" class="border_style" config="{type:'line',body:true,target:'body',css_name:'border-right-style'}"/><br>
							宽度：<input type="text" class="width_v" config="{type:'num',body:true,cent:false,px:true,px_opts:[1,2,3,5],px_rank:[0,100],target:'body',css_name:'border-right-width'}"/><br>
							颜色：<input type="text" class="color" config="{type:'color',body:true,target:'body',css_name:'border-right-color'}"/>
						</div>
						<div id="border_template_bottom" class="border_template_">
							<span>下</span>
							样式：<input type="text" class="border_style" config="{type:'line',body:true,target:'body',css_name:'border-bottom-style'}"/><br>
							宽度：<input type="text" class="width_v" config="{type:'num',body:true,cent:false,px:true,px_opts:[1,2,3,5],px_rank:[0,100],target:'body',css_name:'border-bottom-width'}"/><br>
							颜色：<input type="text" class="color" config="{type:'color',body:true,target:'body',css_name:'border-bottom-color'}"/>
						</div>
						<div id="border_template_left" class="border_template_">
							<span>左</span>
							样式：<input type="text" class="border_style" config="{type:'line',body:true,target:'body',css_name:'border-left-style'}"/><br>
							宽度：<input type="text" class="width_v" config="{type:'num',body:true,cent:false,px:true,px_opts:[1,2,3,5],px_rank:[0,100],target:'body',css_name:'border-left-width'}"/><br>
							颜色：<input type="text" class="color" config="{type:'color',body:true,target:'body',css_name:'border-left-color'}"/>
						</div>
					</li>
					<li id="gaojisz" class="tabs_content_body selected">
						<h3>背景设置：
							<input class="color bg_color" config="{type:'color',target:'body',css_name:'background-color'}" /><span>（点击选择颜色）</span>
						</h3>
						<div class="background_img_set">
							<span>背景图片：</span>
							<input type="text" class="img_text" config="{type:'image',body:true,target:'body',css_name:'background-image'}"><br/>
							<div class="radio_content bg_setter_img_attr">
								<input type="radio" name="repeat" id="repeat_no_repeat" value="no_repeat"/><label for="repeat_no_repeat">不平铺</label>
								<input type="radio" name="repeat" id="repeat_x_repeat" value="x_repeat"/><label for="repeat_x_repeat">横向平铺</label>
								<input type="radio" name="repeat" id="repeat_y_repeat" value="y_repeat"/><label for="repeat_y_repeat">纵向平铺</label>
								<input type="radio" name="repeat" id="repeat_repeat" value="repeat" checked="checked"/><label for="repeat_repeat">双向平铺</label>
							</div>
						</div>
						<div class="background_layout bg_setter_img_attr">
							<h4>背景对齐：</h4>
							<ul>
								<li class="icon l_t"><a href="javascript:void(0)">&nbsp</a></li>
								<li class="icon c_t"><a href="javascript:void(0)">&nbsp</a></li>
								<li class="icon r_t"><a href="javascript:void(0)">&nbsp</a></li>
								<li class="icon l_c"><a href="javascript:void(0)">&nbsp</a></li>
								<li class="icon c_c"><a href="javascript:void(0)">&nbsp</a></li>
								<li class="icon r_c"><a href="javascript:void(0)">&nbsp</a></li>
								<li class="icon l_b"><a href="javascript:void(0)">&nbsp</a></li>
								<li class="icon c_b"><a href="javascript:void(0)">&nbsp</a></li>
								<li class="icon r_b"><a href="javascript:void(0)">&nbsp</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div id="class_demo" class="tabs_content_body">精典布局</div>
</div>
<script language="javascript">
	$(function(){
		$("#layout_content_tabs, #layout_style_setter").yu_tabs();
		
		$(".radio_content").buttonset();
		
		$(".radio_content [name='body_align']").change(function(){
			//加入命令列表
			var widget = $("#main_style").attr("widget");
			var target = widget==''?'body':'#'+widget;
			var css_name = "text-align";
			var width_opt = opt_queues[widget+"->"+target];
			if(width_opt == null){
				opt_queues[widget+"->"+target] = {};
			}
			opt_queues[widget+"->"+target][css_name] = $(this).val();
			$(target).css(css_name,$(this).val());
		});
		
		init_layout_add(); // 添加布局挂件
		
	})
	
</script>